<template>
<l-layout class="l-tab-page">
    <template #left>
        <l-panel :title="$t('角色分类')" style="padding-right:0;" >
            <el-tree v-loading="treeLoading" :data="dataItemTree_Rolecategory"  @node-click="handleNodeClick">
                <span class="lr-tree-node"  slot-scope="{ node}">
                    <i class="el-icon-notebook-2"></i>
                    {{ $t(node.label) }}
                </span>
            </el-tree>
        </l-panel>
    </template>
    <l-select-panel
        style="padding:8px;padding-left:0;"
        ref="selectPanel"
        v-model="value"
        :selectedData.sync="selectedData"
        :columns="columns"
        :isPage="false"
        :loadSelectTable="loadSelectTable"
        
        model="client"
        valueKey="f_RoleId"
        >
        <template v-slot:f_Category="scope" >
            {{lr_dataItemName(lr_dataItem['rolecategory'],scope.row.f_Category)}}
        </template>
    </l-select-panel>
</l-layout>
</template>

<script>
const api = window.$api.organization.role
export default {
    name:'l-role-select-panel',
    components: {
    },
    props: {
    },
    data () {
        return {
            value:'',
            treeLoading:false,
            category:'',

            columns: [
                {label:'编号',prop:'f_EnCode',minWidth:'110'},
                {label:'名称',prop:'f_FullName',minWidth:'120'},
                {label:'分类',prop:'f_Category',width:'140',align:'center'},
            ],
            selectedData:[],
            
        };
    },
    computed:{
        dataItemTree_Rolecategory(){
          return this.lr_dataItemTree(this.lr_dataItem['rolecategory'])
        }
    },
    mounted () {
        this.lr_loadDataItem('rolecategory')
        this.loadTableData()
    },
    methods:{
        loadSelectTable(postData){
            return new Promise((resolve,reject) => {
                api.getList().then(res => {
                    let data = this.$deepClone(res.data.data)
                    data = data.filter(t=>t.f_EnabledMark == 1)
                    if(!this.$validatenull(postData.keyword)){
                        data = data.filter(item => item.f_FullName.indexOf(postData.keyword) >-1 || item.f_EnCode.indexOf(postData.keyword)>-1);
                    }
                    else if(!this.$validatenull(this.category)){
                        data = data.filter(item => item.f_Category == this.category);
                    }
                    resolve({rows:data});
                })
                .catch(err => {
                    reject(err);
                });
            })
        },
        loadTableData(){
            this.$refs.selectPanel.init();
        },
        handleNodeClick(data) {
            this.category = data.value
            this.loadTableData()
        },
        resetForm(){
            this.$refs.selectPanel.reset()
            this.loadTableData()
        },
        getForm(){
            return this.$deepClone(this.selectedData);
        }
    }

}
</script>
